<script setup lang="ts">
import { globalPopups } from '~comp-b/global-popups';
import Banner from '~/assets/imgs/invitation-spin/banner1.png';
import { useList } from '../hooks/index';
import RaffleTips from './RaffleTips.vue';

const authed = useAuthed();
const { currency, withdrawAmount, status } = useList();
</script>

<template>
  <div class="-mt-$main-base-margin">
    <div class="relative w-full pb-28% lt-tablet:pb-39%">
      <img :src="Banner" alt="" class="absolute left-0 top-0 h-full w-full">
      <div class="left0 absolute top-1/2 translate-y--50% px-3.5">
        <div class="mb-4 whitespace-pre-line text-10 text-sys-text-ter font-900">
          <I18nT keypath="l1jyYonJGsgqMNhhqcu" tab="p">
            <template #amount>
              <br>
              <TNum class="text-amber" :value="(status?.max_bonuses ?? 0)" />
            </template>
            <template #currency>
              {{ currency }}
            </template>
          </I18nT>
        </div>
        <div class="relative">
          <AButton class="ant-cover__Button-3d-primary min-w-40" type="primary" @click="globalPopups.invitationSpin.open?.();">
            {{ $t('vDpZjDPvqNlur2IktBvb7') }}
          </AButton>
          <RaffleTips class="absolute left-20 top-15" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.come {
  position: relative;
  min-height: 100px;

  p {
    position: relative;
    z-index: 1;
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: url('~/assets/imgs/user/bonus-introduce/come.png') 100% / cover no-repeat;
  }
}
</style>
